<template>
  <div class="right-board">
    <el-tabs :stretch="true" v-model="currentTab" class="center-tabs">
      <el-tab-pane label="组件属性" name="field"/>
      <el-tab-pane label="表单属性" name="form"/>
    </el-tabs>
    <div class="field-box">
      <!-- <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
        <i class="el-icon-link" />
      </a>-->
      <div class="right-scrollbar">
        <el-scrollbar>
          <div class="attrs-box">
            <!-- 组件属性 -->
            <el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
              <el-form-item v-if="_activeData.label!==undefined" label="标题">
                <el-input @input="onChange.labelInput" v-model="_activeData.label" placeholder="请输入标题"/>
              </el-form-item>
              <el-form-item v-if="_activeData.placeholder!==undefined" label="占位提示">
                <el-input @input="onChange.placeholderInput" v-model="_activeData.placeholder"
                          placeholder="请输入占位提示"/>
              </el-form-item>
              <el-form-item
                  v-if="_activeData.vModel!==undefined && _activeData.layout !== 'rowFormItem'"
                  label="默认值">
                <DefaultValueShow :model-value="_activeData.defaultValue"></DefaultValueShow>
              </el-form-item>
              <el-form-item v-if="_activeData.autosize !== undefined" label="最小行数">
                <el-input-number @input="onChange.autosizeMinRows" v-model="_activeData.autosize.minRows" :min="1"
                                 placeholder="最小行数"/>
              </el-form-item>
              <el-form-item v-if="_activeData.autosize !== undefined" label="最大行数">
                <el-input-number @input="onChange.autosizeMaxRows" v-model="_activeData.autosize.maxRows" :min="1"
                                 placeholder="最大行数"/>
              </el-form-item>
              <el-form-item v-if="_activeData.min !== undefined" label="最小值">
                <el-input-number @input="onChange.min" v-model="_activeData.min" placeholder="最小值"/>
              </el-form-item>
              <el-form-item v-if="_activeData.max !== undefined" label="最大值">
                <el-input-number @input="onChange.max" v-model="_activeData.max" placeholder="最大值"/>
              </el-form-item>
              <el-form-item v-if="_activeData.step !== undefined" label="步长">
                <el-input-number @input="onChange.step" v-model="_activeData.step" placeholder="步数"/>
              </el-form-item>
              <el-form-item v-if="['el-input-number','fc-amount'].includes(_activeData.tag)" label="精度">
                <el-input-number @input="onChange.precision" v-model="_activeData.precision" :min="0"
                                 placeholder="精度"/>
              </el-form-item>
              <el-form-item v-if="_activeData.maxlength !== undefined" label="最多输入">
                <el-input @input="onChange.maxlength" v-model="_activeData.maxlength" placeholder="请输入字符长度">
                  <template slot="append">个字符</template>
                </el-input>
              </el-form-item>
              <el-form-item v-if="_activeData.accept !== undefined" label="文件类型">
                <el-select
                    v-model="_activeData.accept"
                    placeholder="请选择文件类型"
                    :style="{ width: '100%' }"
                    clearable
                    @change="onChange.accept"
                >
                  <el-option label="图片" value="image/*"/>
                  <el-option label="视频" value="video/*"/>
                  <el-option label="音频" value="audio/*"/>
                  <el-option label="excel" value=".xls,.xlsx"/>
                  <el-option label="word" value=".doc,.docx"/>
                  <el-option label="pdf" value=".pdf"/>
                  <el-option label="txt" value=".txt"/>
                </el-select>
              </el-form-item>
              <el-form-item v-if="_activeData.fileSize !== undefined" label="文件大小">
                <el-input @input="onChange.fileSize" v-model.number="_activeData.fileSize" placeholder="请输入文件大小">
                  <el-select slot="append" v-model="_activeData.sizeUnit" :style="{ width: '66px' }">
                    <el-option label="KB" value="KB"/>
                    <el-option label="MB" value="MB"/>
                    <el-option label="GB" value="GB"/>
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item v-if="_activeData['picker-options'] !== undefined" label="时间段">
                <el-input @input="onChange.pickerOptionsSelectableRange"
                          v-model="_activeData['picker-options'].selectableRange" placeholder="请输入时间段"/>
              </el-form-item>
              <el-form-item v-if="_activeData.format !== undefined" label="时间格式">
                <el-input
                    :value="_activeData.format"
                    placeholder="请输入时间格式"
                    @input="onChange.setTimeValue($event)"
                />
              </el-form-item>
              <template
                  v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].includes(_activeData.tag)"
              >
                <el-divider>选项</el-divider>
                <draggable
                    item-key="value"
                    :list="_activeData.options"
                    :animation="340"
                    group="selectItem"
                    handle=".option-drag"
                    chosenClass="sortable-chosen"
                    ghostClass="sortable-ghost"
                >
                  <template #item="{ element, index }">
                    <div class="select-item">
                      <div class="select-line-icon option-drag">
                        <el-icon>
                          <Operation/>
                        </el-icon>
                      </div>
                      <div style="display: flex;align-items: center">
                        <span style="font-size: 12px;    color: #606266">label：</span>
                        <el-input
                            placeholder="label"
                            size="small"
                            v-model="_activeData.options[index].label"
                            @input="onChange.setOptionLabel(element,index, $event)"
                        />
                        <el-divider direction="vertical"/>
                        <span style="font-size: 12px;    color: #606266">value：</span>
                        <el-input
                            placeholder="value"
                            size="small"
                            v-model="_activeData.options[index].value"
                            @input="onChange.setOptionValue(element,index, $event)"
                        />
                      </div>
                      <div
                          class="close-btn select-line-icon"
                          @click="onChange.deleteOption(index)"
                      >
                        <el-icon>
                          <RemoveFilled/>
                        </el-icon>
                      </div>
                    </div>
                  </template>
                </draggable>
                <div class="add-option">
                  <el-button
                      icon="plus"
                      @click="onChange.addSelectItem"
                  >添加选项
                  </el-button>
                </div>
                <el-divider/>
              </template>
              <el-form-item v-if="_activeData.clearable !== undefined" label="能否清空">
                <el-switch @change="onChange.clearable" v-model="_activeData.clearable"/>
              </el-form-item>
              <el-form-item v-if="_activeData.showTip !== undefined" label="显示提示">
                <el-switch @change="onChange.showTip" v-model="_activeData.showTip"/>
              </el-form-item>
              <el-form-item v-if="_activeData.disabled !== undefined" label="是否禁用">
                <el-switch @change="onChange.disabled" v-model="_activeData.disabled"/>
              </el-form-item>
              <el-form-item
                  v-if="_activeData.tag === 'el-upload' && _activeData.multiple !== undefined"
                  label="多选文件"
              >
                <el-switch @change="onChange.multiple" v-model="_activeData.multiple"/>
              </el-form-item>
              <el-form-item v-if="_activeData.required !== undefined" label="是否必填">
                <el-switch v-model="_activeData.required" @change="onChange.requireChange"/>
              </el-form-item>
              <el-form-item v-if="_activeData.showChinese !== undefined" label="显示大写">
                <el-switch @change="onChange.showChinese" v-model="_activeData.showChinese"/>
              </el-form-item>
              <el-form-item label="作为摘要">
                <el-switch @change="onChange.asSummary" v-model="_activeData.asSummary"/>
              </el-form-item>
              <el-form-item
                  v-if="['el-select','fc-user-select','fc-dept-select','fc-target-dept-select'].includes(_activeData.tag)"
                  label="是否多选">
                <el-switch v-model="_activeData.multiple" @change="onChange.multipleChange"/>
              </el-form-item>
            </el-form>
            <!-- 表单属性 -->
            <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
              <el-form-item label="表单名">
                <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）"/>
              </el-form-item>
            </el-form>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  computed,
  ref,
  watch
} from 'vue';
import {saveFormConf} from "../../../tool.js";
import draggable from "vuedraggable";
import flowStore from "@/views/flow/flowStore.js";
import DefaultValueShow from "@/views/flow/createDirectly/generatorForm/RightPanel/DefaultValueShow.vue";
const dateTimeFormat = {
  date: "yyyy-MM-dd",
  week: "yyyy 第 WW 周",
  month: "yyyy-MM",
  year: "yyyy",
  datetime: "yyyy-MM-dd HH:mm:ss",
  daterange: "yyyy-MM-dd",
  monthrange: "yyyy-MM",
  datetimerange: "yyyy-MM-dd HH:mm:ss"
};
const props = defineProps(
    {
      showField: {
        type: Boolean,
        default: true
      },
      activeData: {
        type: Object,
        default: () => {
          return {};
        }
      },
      formConf: {
        type: Object,
        default: () => {
          return {};
        }
      }
    }
);
const emit = defineEmits(['update:updateActiveData',
  'update:formConf']);
const _activeData = computed({
  get() {
    return JSON.parse(JSON.stringify(props.activeData));
  },
  set(val) {
    emit('update:updateActiveData',
        val);
  }
});
const setActiveData = (data) => {
  _activeData.value = {..._activeData.value, ...data};
};
const expressionTemp = ref([]);
const proConditionCmp = ["el-input-number",
  "el-select",
  "el-radio-group"]; // 可作为流程图条件的组件
const currentTab = ref("field");
const currentNode = ref(null);
const dialogVisible = ref(false);
const iconsVisible = ref(false);
const currentIconModel = ref(null);
const expDialogVisible = ref(false);
const expValid = ref(true);
const onChange = {
  setOptionLabel: (item,
                   index,
                   $event) => {
    let options = JSON.parse(JSON.stringify(_activeData.value['options']))
    options[index]['label'] = $event;
    setActiveData({
      options
    })
  },
  setOptionValue: (item,
                   index,
                   $event) => {
    let options = JSON.parse(JSON.stringify(_activeData.value['options']))
    options[index]['value'] = $event;
    setActiveData({
      options
    })
  },
  deleteOption: (index) => {
    let options = JSON.parse(JSON.stringify(_activeData.value['options']))
    options.splice(index,
        1);
    setActiveData({
      options
    })
  },
  labelInput: (val) => {
    setActiveData({
      label: val
    })
  },
  placeholderInput: (val) => {
    setActiveData({
      placeholder: val
    })
  },
  autosizeMinRows: (val) => {
    let autosize = JSON.parse(JSON.stringify(_activeData.value['autosize']))
    autosize['minRows'] = val
    setActiveData({
      autosize
    })
  },
  autosizeMaxRows: (val) => {
    let autosize = JSON.parse(JSON.stringify(_activeData.value['autosize']))
    autosize['maxRows'] = val
    setActiveData({
      autosize
    })
  },
  min: (val) => {
    setActiveData({
      min: val
    })
  },
  max: (val) => {
    setActiveData({
      max: val
    })
  },
  step: (val) => {
    setActiveData({
      step: val
    })
  },
  precision: (val) => {
    setActiveData({
      precision: val
    })
  },
  maxlength: (val) => {
    setActiveData({
      maxlength: val
    })
  },
  accept: (val) => {
    setActiveData({
      accept: val
    })
  },
  fileSize: (val) => {
    setActiveData({
      fileSize: val
    })
  },
  showDuration: (val) => {
    setActiveData({
      showDuration: val
    })
  },
  setTimeValue: (val,
                 type) => {
    const valueFormat = type === "week" ? dateTimeFormat.date : val;
    setActiveData({
      "defaultValue": null,
    })
    setActiveData({
      "value-format": valueFormat,
    })
    setActiveData({
      "format": val,
    })
  },
  pickerOptionsSelectableRange: (val) => {
    let pickerOptions = JSON.parse(JSON.stringify(_activeData.value['picker-options']))
    pickerOptions['selectableRange'] = val
    setActiveData({
      'picker-options': pickerOptions
    })
  },
  requireChange: (required) => {
    setActiveData({
      required
    })
    // 下拉 单选 计数 日期区间 时间区间 需要写进流程条件中
    if (!_activeData.value.proCondition) return;
  },
  addSelectItem: () => {
    let options = JSON.parse(JSON.stringify(_activeData.value.options));
    options.push({
      label: "",
      value: ""
    });
    setActiveData({
      options: options
    })
  },
  clearable: (val) => {
    setActiveData({
      clearable: val
    })
  },
  showTip: (val) => {
    setActiveData({
      showTip: val
    })
  },
  disabled: (val) => {
    setActiveData({
      disabled: val
    })
  },
  multiple: (val) => {
    setActiveData({
      multiple: val
    })
  },
  showChinese: (val) => {
    setActiveData({
      showChinese: val
    })
  },
  asSummary: (val) => {
    setActiveData({
      asSummary: val
    })
  },
  multipleChange: (val) => {
    setActiveData({
      multiple: val
    })
  }
}
watch(() => props.formConf,
    (val) => {
      saveFormConf(val);
    },
    {deep: true});
watch(() => _activeData.value,
    (val) => {
      if (val.tag !== 'fc-calculate') return;
      reloadExpressionTemp();
    });
const reloadExpressionTemp = () => {
  const isValid = (d) => {
    const target = props.calculateCmps.find(cmp => cmp.vModel === d.vModel && cmp.label === d.label);
    return target ? true : false;
  };
  expressionTemp.value = _activeData.value.expression.map(t => {
    return typeof t === 'string' || isValid(t) ? t : {
      vModel: t.vModel,
      label: '无效的值'
    };
  });
  setActiveData({
    expression: expressionTemp.value
  })
};
</script>
<style lang="scss" scoped>
.right-board {
  border: 1px solid #eee;
  border-top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  .el-tabs {
    :deep(.el-tabs__content) {
      .el-collapse-item__header {
      }
      .el-tab-pane {
      }
    }
    :deep(.el-tabs__header) {
      .el-tabs__nav-wrap {
        .el-tabs__item {
          height: 51px;
        }
      }
    }
  }
  .center-tabs {
    width: 100%;
    flex: 0;
  }
  .field-box {
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    .right-scrollbar {
      width: 100%;
      flex: 0 0 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .el-scrollbar {
        width: 100%;
        overflow-x: hidden;
        .attrs-box {
          padding: 12px;
          padding-top: 0;
          padding-bottom: 0;
          .el-form {
            width: 100%;
            overflow: hidden;
          }
        }
      }
    }
  }
}
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.add-option {
  margin-top: 6px;
  button {
    width: 100%;
  }
}
.select-line-icon {
  padding: 0 4px;
  color: #777;
}
.option-drag {
  cursor: move;
  display: flex;
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  :deep(.el-icon-time) {
    display: none;
  }
}
.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label {
  font-size: 14px;
}
.node-icon {
  color: #bebfc3;
}
.calc-btn {
  padding: 4px 8px;
  margin: 0 6px;
  background: #e5e5e5;
  cursor: pointer;
  &.error {
    background: #f56c6c;
    color: white;
  }
  &:hover {
    background: #f5f5f5;
  }
}
.pane-calc-preview {
  padding: 0 10px;
  cursor: pointer;
  min-height: 32px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 12px;
}
.calc-dialog {
  .calc-box {
    font-size: 12px;
    .calc-tip {
      margin: 10px 0;
      font-size: 12px;
      color: #aaa;
    }
    .calc-preview {
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      min-height: 60px;
      padding: 4px 10px;
      position: relative;
      &.error {
        border: 1px solid red;
      }
      .preview-actions {
        position: absolute;
        bottom: 0;
        right: 0;
        > i {
          font-size: 14px;
          margin-right: 8px;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
    }
  }
}
</style>

